<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <title>Error！</title>
    <style type="text/css">
        /* reset */
        body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            padding: 0;
            margin: 0;
        }

        html {
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            height: 100%;
            overflow-y: scroll;
            -webkit-tap-highlight-color: transparent;
        }

        h1, h2, h3, h4, h5 {
            font-weight: normal;
            font-size: 100%;
        }

        ul, li, ol {
            list-style: none;
        }

        em, i {
            font-style: normal;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        strong, b {
            font-weight: normal;
        }

        input:focus, textarea:focus {
            outline: 0 none;
        }

        body {
            color: #666;
            background: #fbfbfb;
            font-family: Helvetica Nueue, Microsoft YaHei;
            font-size-adjust: none;
            -webkit-text-size-adjust: none;
            position: relative;
            height: 100%;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        a:hover, a:visited {
            color: #666;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        input[type="search"]::-webkit-search-cancel-button {
            display: none;
        }

        input[type="search"]:focus {
            background-color: transparent;
            color: #666;
        }

        input::-ms-clear {
            display: none;
        }

        ::-moz-placeholder {
            color: #c7c7c7;
        }

        :-ms-input-placeholder {
            color: #c7c7c7;
        }

        ::-webkit-input-placeholder {
            color: #c7c7c7;
        }

        /* end reset */
        html, body {
            height: 100%;
        }

        .wrap {
            width: 70%;
            margin: 0 auto;
        }

        .wrap .hd {
            padding-top: 55px;
            border-bottom: 2px solid #e9e9e9;
        }

        .wrap .hd .img {
            display: block;
            margin: 0 auto;
            width: 311px;
            height: 316px;
            background: url("") no-repeat;
        }

        .wrap .hd strong {
            display: block;
            color: #858585;
            font-size: 34px;
            line-height: 40px;
            padding: 20px 0;
            text-align: center;
            font-weight: 700;
        }

        .wrap .bd {
            font-size: 28px;
            line-height: 44px;
            color: #999;
            padding: 26px 0 45px 18px;
            margin-right: -20%;
        }

        .wrap .bd p ins {
            display: inline-block;
            float: left;
            width: 3px;
            height: 3px;
            overflow: hidden;
            margin: 20px 10px 0 10px;
            text-decoration: none;
            background: #aaa;
        }

        .wrap .btns {
            font-size: 0;
            padding-bottom: 30px;
            text-align: center;
        }

        .wrap .btns a {
            display: inline-block;
            overflow: hidden;
            width: 200px;
            height: 60px;
            line-height: 64px;
            border: 1px solid #d7d7d7;
            border-radius: 4px;
            font-size: 28px;
            color: #606060;
            background-image: -webkit-linear-gradient(#fafafa, #f1f1f1);
            background-image: -o-linear-gradient(#fafafa, #f1f1f1);
            background-image: linear-gradient(#fafafa, #f1f1f1);
        }

        .wrap .btns a:hover {
            background-image: -webkit-linear-gradient(#f1f1f1, #fafafa);
            background-image: -o-linear-gradient(#f1f1f1, #fafafa);
            background-image: linear-gradient(#f1f1f1, #fafafa);
        }

        .wrap .btns a ins {
            display: inline-block;
            float: left;
            width: 36px;
            height: 36px;
            background: url("") no-repeat;
        }

        .wrap .btns a em {
            float: left;
        }

        @media only screen {
            .wrap .hd {
                padding-top: 27px;
                border-bottom-width: 1px;
            }

            .wrap .hd .img {
                width: 155px;
                height: 158px;
                background-size: 155px 158px;
            }

            .wrap .hd strong {
                font-size: 17px;
                line-height: 20px;
                padding: 10px 0;
            }

            .wrap .bd {
                font-size: 14px;
                line-height: 22px;
                padding: 13px 0 22px 9px;
            }

            .wrap .bd p ins {
                margin: 9px 5px 0 5px;
            }

            .wrap .btns {
                padding-bottom: 15px;
                margin: 0 -25px;
            }

            .wrap .btns a {
                width: 100px;
                height: 30px;
                line-height: 32px;
                font-size: 14px;
                margin: 0 10px;
            }

            .wrap .btns a ins {
                width: 18px;
                height: 18px;
                background-size: 18px 36px;
                margin: 7px 5px 0 12px;
            }

            .wrap .btns a ins.back {
                background-position: 0 0;
                margin: 7px 7px 0 20px;
            }

            .wrap .btns a ins.refresh {
                background-position: 0 -18px;
            }
        }

        @media only screen and (min-width: 321px) and (max-width: 479px) {
            .wrap .hd {
                padding-top: 36px;
                border-bottom-width: 1px;
            }

            .wrap .hd .img {
                width: 207px;
                height: 210px;
                background-size: 207px 210px;
            }

            .wrap .hd strong {
                font-size: 22px;
                line-height: 26px;
                padding: 13px 0;
            }

            .wrap .bd {
                font-size: 18px;
                line-height: 29px;
                padding: 17px 0 30px 12px;
            }

            .wrap .bd p ins {
                margin: 12px 6px 0 6px;
            }

            .wrap .btns {
                padding-bottom: 20px;
                margin: 0 -34px;
            }

            .wrap .btns a {
                width: 133px;
                height: 40px;
                line-height: 42px;
                font-size: 18px;
                margin: 0 13px;
            }

            .wrap .btns a ins {
                width: 24px;
                height: 24px;
                background-size: 24px 48px;
                margin: 9px 6px 0 16px;
            }

            .wrap .btns a ins.back {
                background-position: 0 0;
                margin: 9px 10px 0 26px;
            }

            .wrap .btns a ins.refresh {
                background-position: 0 -24px;
            }
        }

        @media only screen and (min-width: 480px) {
            .wrap .hd {
                padding-top: 55px;
                border-bottom-width: 2px;
            }

            .wrap .hd .img {
                width: 311px;
                height: 316px;
                background-size: 311px 316px;
            }

            .wrap .hd strong {
                font-size: 34px;
                line-height: 40px;
                padding: 20px 0;
            }

            .wrap .bd {
                font-size: 28px;
                line-height: 44px;
                padding: 26px 0 45px 18px;
            }

            .wrap .bd p ins {
                margin: 18px 10px 0 10px;
            }

            .wrap .btns {
                padding-bottom: 30px;
                margin: 0 -50px;
            }

            .wrap .btns a {
                width: 200px;
                height: 60px;
                line-height: 64px;
                font-size: 28px;
                margin: 0 20px;
            }

            .wrap .btns a ins {
                width: 36px;
                height: 36px;
                background-size: 36px 72px;
                margin: 14px 10px 0 24px;
            }

            .wrap .btns a ins.back {
                background-position: 0 0;
                margin: 14px 15px 0 40px;
            }

            .wrap .btns a ins.refresh {
                background-position: 0 -36px;
            }
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="hd clearfix">
        <span class="img"></span>
        <strong>Cann't Open The Page...</strong>
    </div>
    <div class="bd clearfix">
        <p>
            <ins>·</ins>
            Reason Maybe：
        </p>
        <p>
            <ins>·</ins>
            The Page Has Some Error
        </p>
        <p>
            <ins>·</ins>
            The Page Url is Not Correct
        </p>
        <p>
            <ins>·</ins>
            Network Disconnected or The Network Signal is Too Bad ^o^
        </p>
    </div>
    <div class="btns clearfix">
        <a href="javascript:;"
           onclick="javascript:window.webkit.messageHandlers.webViewBack.postMessage('')">
            <ins class="back"></ins>
            <em>Back</em></a>
        <a class="ml30" href="javascript:;"
           onclick="javascript:window.webkit.messageHandlers.webViewReload.postMessage('')">
            <ins class="refresh"></ins>
            <em>Reload</em></a>
    </div>
</div>
</body>
</html>